<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>发票列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <div align="center" class="d1" style="color: mediumblue">
        <h3>发票列表</h3>
      </div>
      <div class="d2">
        <el-form :model="searchForm" class="demo-form-inline">
          <el-row :gutter="20">
            <el-form-item>
              <el-col :span="5">
                <el-input placeholder="请输入关键字" v-model="searchForm.code"></el-input>
              </el-col>
              <div style="float: right">
                <el-button @click="searchUser" plain type="info">搜索</el-button>
              </div>
            </el-form-item>
          </el-row>
        </el-form>
      </div>

      <el-table
        :data="invoice"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>

        <el-table-column
          label="编号"
          prop="code">
        </el-table-column>
        <el-table-column
          label="客户"
          prop="customername">
        </el-table-column>
        <el-table-column
          label="税号"
          prop="invoiceNum">
        </el-table-column>
        <el-table-column
          label="税率"
          prop="taxRate">
        </el-table-column>
        <el-table-column
          label="开票金额"
          prop="amount">
        </el-table-column>
        <el-table-column
          label="收件人"
          prop="receiver">
        </el-table-column>
        <el-table-column
          label="收货地址"
          prop="revAddress">
        </el-table-column>
        <el-table-column
          label="联系电话"
          prop="tel">
        </el-table-column>
        <el-table-column
          label="物流公司"
          prop="logisticsCym">
        </el-table-column>
        <el-table-column
          label="状态"
          prop="state">
          <template slot-scope="scope">
            {{scope.row.state | sFit}}
          </template>
        </el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-col :span="12">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <div v-if="scope.row.state==0">
                    <el-button @click="sh(scope.row.id)" plain type="primary">审核</el-button>
                  </div>
                  <div>
                    <el-button @click="cxOrder(scope.row.id)" plain type="primary">查看</el-button>
                  </div>
                  <div v-if="scope.row.state==1">
                    <el-button @click="sh(scope.row.id)" plain type="primary">邮寄</el-button>
                  </div>
                  <div>
                    <el-button @click="getLog(scope.row.id)" plain type="primary">发票记录</el-button>
                  </div>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </template>
        </el-table-column>
      </el-table>
      <div align="center">
        <el-pagination
          :current-page="page.pagenum"
          :page-size="page.pagesize"
          :page-sizes="[5, 10, 20, 40]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>

      <el-dialog :close-on-click-modal="false" :visible.sync="orderRecordVisible" @close="clearorderRecordList">
        <h3 align="center" style="color: #409EFF">发票详情</h3>
        <hr>
        <el-form :model="orderRecordList" label-width="70px">
          <el-row :gutter="100">
            <el-col :span="11">
              <el-form-item label="编号">
                <el-input v-model="orderRecordList.code" readonly></el-input>
              </el-form-item>
              <el-form-item label="发票类型">
                <el-select v-model="orderRecordList.invoiceType" placeholder="请选择发票类型" disabled>
                  <el-option label="增值税普通发票" :value="0"></el-option>
                  <el-option label="增值税专用发票" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发票抬头">
                <el-input v-model="orderRecordList.invoiceTitle" readonly></el-input>
              </el-form-item>
              <el-form-item label="税率">
                <el-input v-model="orderRecordList.taxRate" readonly></el-input>
              </el-form-item>
              <el-form-item label="开票金额">
                <el-input v-model="orderRecordList.amount" readonly></el-input>
              </el-form-item>
              <el-form-item label="发票内容">
                <el-input type="textarea" v-model="orderRecordList.content" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="收件人">
                <el-input v-model="orderRecordList.receiver" readonly></el-input>
              </el-form-item>
              <el-form-item label="收货地址">
                <el-input v-model="orderRecordList.revAddress" readonly></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model.number="orderRecordList.tel" readonly></el-input>
              </el-form-item>
              <el-form-item label="收件人">
                <el-input v-model="orderRecordList.receiver" readonly></el-input>
              </el-form-item>
              <el-form-item label="收货地址">
                <el-input v-model="orderRecordList.revAddress" readonly></el-input>
              </el-form-item>
              <el-form-item label="邮寄公司" v-if="this.orderRecordList.state==3">
                <el-input v-model="orderRecordList.logisticsCym" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="orderRecordVisible = false">取 消</el-button>
        </div>

      </el-dialog>
      <el-dialog :close-on-click-modal="false" :visible.sync="order">
        <h3 align="center" style="color: #409EFF" v-if="this.orderRecordList.state!=1">审核发票</h3>
        <h3 align="center" style="color: #409EFF" v-if="this.orderRecordList.state==1">邮寄发票</h3>
        <hr>
        <el-form :model="orderRecordList" label-width="70px" @close="clearorderRecordList" :rules="orderRecord">
          <el-row :gutter="100">
            <el-col :span="11">
              <el-form-item label="编号">
                <el-input v-model="orderRecordList.code" readonly></el-input>
              </el-form-item>
              <el-form-item label="发票类型" v-if="this.orderRecordList.state!=1">
                <el-select v-model="orderRecordList.invoiceType" placeholder="请选择发票类型" disabled >
                  <el-option label="增值税普通发票" :value="0"></el-option>
                  <el-option label="增值税专用发票" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发票抬头" v-if="this.orderRecordList.state!=1">
                <el-input v-model="orderRecordList.invoiceTitle" readonly></el-input>
              </el-form-item>
              <el-form-item label="税率" v-if="this.orderRecordList.state!=1">
                <el-input v-model="orderRecordList.taxRate" readonly></el-input>
              </el-form-item>
              <el-form-item label="开票金额" v-if="this.orderRecordList.state!=1">
                <el-input v-model="orderRecordList.amount" readonly></el-input>
              </el-form-item>
              <el-form-item label="发票内容" v-if="this.orderRecordList.state!=1">
                <el-input type="textarea" v-model="orderRecordList.content" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="收件人" v-if="this.orderRecordList.state!=1">
                <el-input v-model="orderRecordList.receiver" readonly></el-input>
              </el-form-item>
              <el-form-item label="收货地址" v-if="this.orderRecordList.state!=1">
                <el-input v-model="orderRecordList.revAddress" readonly></el-input>
              </el-form-item>
              <el-form-item label="联系电话" v-if="this.orderRecordList.state!=1">
                <el-input v-model.number="orderRecordList.tel" readonly></el-input>
              </el-form-item>
              <el-form-item label="收件人" v-if="this.orderRecordList.state!=1">
                <el-input v-model="orderRecordList.receiver" readonly></el-input>
              </el-form-item>
              <el-form-item label="收货地址" v-if="this.orderRecordList.state!=1">
                <el-input v-model="orderRecordList.revAddress" readonly></el-input>
              </el-form-item>
              <el-form-item label="物流公司" v-if="this.orderRecordList.state==1">
                <el-input v-model="orderRecordList.logisticsCym"></el-input>
              </el-form-item>
              <el-form-item label="快递单号" v-if="this.orderRecordList.state==1">
                <el-input v-model="orderRecordList.logisticsCode"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <div style="float: left;margin-top: -50px" v-if="this.orderRecordList.state!=1">
            <el-button type="danger" @click="remarksDiloag=true">审核未通过</el-button>
          </div>
          <div style="float: right;margin-top: -50px" v-if="this.orderRecordList.state!=1">
            <el-button type="success" @click="zt(orderRecordList.id,1)">审核通过</el-button>
          </div>
          <div style="float: right;margin-top: -50px" v-if="this.orderRecordList.state==1">
            <el-button type="success" @click="zt(orderRecordList.id,3)">邮寄</el-button>
          </div>
        </div>
      </el-dialog>


      <el-dialog title="发票历史操作纪录" :visible.sync="invoicelogFormVisible" @close="clearLog" style="height: 800px" lock-scroll v-infinite-scroll="load">
        <div>
          <el-table
            :data="invoiceLog"
            style="width: 100%">
            <el-table-column
              prop="userName"
              label="操作人姓名">
            </el-table-column>
            <el-table-column
              label="操作时间">
              <template slot-scope="scope">
                {{scope.row.updatetime | datefmt}}
              </template>
            </el-table-column>
            <el-table-column
              prop="remarks"
              label="操作说明">
            </el-table-column>
          </el-table>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="invoicelogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="invoicelogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="不通过原因" :visible.sync="remarksDiloag" @close="clearRemarks">
        <div>
          <el-input type="textarea" :rows="2" v-model="orderRecordList.remarks"></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="txremarks(orderRecordList.id,2)">确 定</el-button>
        </div>
      </el-dialog>

    </el-card>

  </div>

</template>

<script>

  export default {
    name: "craftList",
    data() {
      return {
        invoice: [],
        invoiceLog: [],
        invoicelogFormVisible:false,
        remarksDiloag:false,
        page: {
          pagenum: 0,
          pagesize: 5
        },
        total: 0,
        searchForm: {code: ""},
        nowUser: {},
        orderRecordVisible: false,
        orderRecordList: {},
        order: false,
        count: 0,
        orderRecord:{
          logisticsCym:[
            {required:true,message:"物流公司不能为空",trigger:'blur'}
          ],
          logisticsCode:[
            {required:true,message:"物流单号不能为空",trigger:'blur'}
          ]
        }
      }
    },
    methods: {
      load () {
        this.count += 2
      },
      getLog(id) {
        this.$http.get("/Invoice/pi-invoice-log/getInvoiceLog/"+id).then((res) => {
          if (res.data.success) {
            this.invoiceLog=res.data.result
            this.invoicelogFormVisible=true
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      clearRemarks(){
        this.orderRecordList.remarks=null
      },
      clearLog(){
        this.invoiceLog=[]
      },
      clearorderRecordList() {
        this.orderRecordList = {}
      },
      txremarks(id,zt){
        this.zt(id,zt)
      },
      zt: function (id, zt) {
        this.$http.post("/Invoice/pi-invoice/zt/" + zt + "/" + this.nowUser.id, this.orderRecordList).then((res) => {
          if (res.data.success) {
            if(zt==2){
              this.remarksDiloag=false
            }
            this.searchUser(); //赋值
            this.order = false //显示dialog框
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      cxOrder: function (id) {
        this.$http.get("/Invoice/pi-invoice/getck/" + id).then((res) => {
          if (res.data.success) {
            this.orderRecordList = res.data.result //赋值
            this.orderRecordVisible = true //显示dialog框
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      sh: function (id) {
        this.$http.get("/Invoice/pi-invoice/getck/" + id).then((res) => {
          if (res.data.success) {
            this.orderRecordList = res.data.result //赋值
            this.order = true //显示dialog框
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      searchUser: function () {//用户列表
        this.$http.post("/Invoice/pi-invoice/list/" + this.page.pagenum + "/" + this.page.pagesize, this.searchForm).then((res) => {
          if(res.data.success){
            this.invoice = res.data.result.list;
            this.total = res.data.result.total;
          }else{
            this.$message.error(res.data.message)
          }
        });
      },
      handleSizeChange: function (val) {
        this.page.pagesize = val;
        this.searchUser();
      },
      handleCurrentChange: function (val) {
        this.page.pagenum = val;
        this.searchUser();
      },
    },
    filters: {
      sFit: function (val) {
        if (val == 0) {
          return "待审核"
        }
        if (val == 1) {
          return "审核通过"
        }
        if (val == 2) {
          return "审核未通过"
        } else if (val == 3) {
          return "已邮寄"
        }else if(val==4){
          return "已确认收货"
        }
      }
    },
    mounted() {
      this.searchUser();//获取列表
      this.nowUser = JSON.parse(sessionStorage.getItem("user"))
    },

  }
</script>

<style scoped>
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
